<!--
  *  员工 列表
  -->
<template>
  <a-card class="employee-container">
    <div class="header">
      <a-typography-title :level="5">清单列表</a-typography-title>
    </div>
    <div class="btn-group">
      <span class="smart-table-column-operate">
        <TableOperator v-model="columns" :tableId="TABLE_ID_CONST.SYSTEM.EMPLOYEE" :refresh="queryEmployee" />
      </span>
    </div>

    <a-table size="small" :columns="columns" :data-source="tableData" :pagination="false" :loading="tableLoading"
      :scroll="{ x: 1500 }" row-key="blsysuserid" bordered>
      <template #bodyCell="{ text, record, column }">
        <template v-if="column.dataIndex === 'blagreementname'">
          <a :href="record.blpersonphotopath" target="_blank" title="点击查看协议">{{ record.blagreementname }}</a>
        </template>
        <template v-if="column.dataIndex === 'amount'">
          <template v-for="item in record.amount" :key="item">
            <div>
              {{ item.date }}---{{item.money}}
            </div>
          </template>
        </template>
        <template v-if="column.dataIndex === 'depart'">
          <template v-for="item in record.depart" :key="item">
            <div>
              {{ item.name }}---{{item.money}}
            </div>
          </template>
        </template>
      </template>
    </a-table>
    <div class="smart-query-table-page">
      <a-pagination showSizeChanger showQuickJumper show-less-items :pageSizeOptions="PAGE_SIZE_OPTIONS"
        :defaultPageSize="params.limit" v-model:current="params.page" v-model:pageSize="params.limit" :total="total"
        @change="queryEmployee" @showSizeChange="queryEmployee" :show-total="showTableTotal" />
    </div>
  </a-card>
</template>
<script setup lang="ts">
  import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
  import { message, Modal } from 'ant-design-vue';
  import _ from 'lodash';
  import { computed, createVNode, reactive, ref, watch, inject } from 'vue';
  import { DetailListApi } from '/src/api/basicManage/Promanage/DetailList-api';
  import { PAGE_SIZE } from '/@/constants/common-const';
  import { SmartLoading } from '/@/components/framework/smart-loading';
  import { PAGE_SIZE_OPTIONS, showTableTotal } from '/@/constants/common-const';
  import { smartSentry } from '/@/lib/smart-sentry';
  import TableOperator from '/@/components/support/table-operator/index.vue';
  import { TABLE_ID_CONST } from '/@/constants/support/table-id-const';

  // ----------------------- 以下是字段定义 emits props ---------------------

  const props = defineProps({
    year: Number,
    breadcrumb: Array,
  });

  //-------------回显账号密码信息----------
  let employeePasswordDialog = ref();
  function showAccount(accountName, passWord) {
    employeePasswordDialog.value.showModal(accountName, passWord);
  }
  // 传递的值
  const passId = ref('');
  passId.value = props.year;

  // ----------------------- 表格/列表/ 搜索 ---------------------
  //字段
  const columns = ref([
    {
      title: '项目名称',
      dataIndex: 'blprojectname',
      width: 85,
      align: 'center',
      fixed: "left",
    },
    {
      title: '协议',
      dataIndex: 'blagreementname',
      align: 'center',
      width: 70,
    },
    {
      title: '捐赠方',
      dataIndex: 'bldonor',
      align: 'center',
      width: 100,
    },
    {
      title: '本年签约余额',
      dataIndex: 'blmoney',
      align: 'center',
      width: 85,
      sorter: {
        compare: (a, b) => a.blmoney - b.blmoney,
      },
    },
    {
      title: '牵头方',
      dataIndex: 'bllinkmanname',
      align: 'center',
      width: 85,
    },
    {
      title: '跟进方',
      dataIndex: 'blfollowname',
      align: 'center',
      width: 85,
    },
    {
      title: '到账日期及到账金额',
      dataIndex: 'amount',
      align: 'center',
      width: 85,
    },
    {
      title: '各部门配比',
      dataIndex: 'depart',
      align: 'center',
      width: 85,
    },
  ]);
  const tableData = ref();

  let defaultParams = {
    key: undefined,
    page: 1,
    limit: PAGE_SIZE,
  };
  const params = reactive({ ...defaultParams });
  // 表格加载loading
  const tableLoading = ref(false);
  // 总数
  const total = ref(0);
  // 查询  年度清单列表
  async function queryEmployee() {
    tableLoading.value = true;
    try {
      params.key = props.year;
      let res = await DetailListApi.getFundList(params);

      // 到账金额以及日期
      let newForm = []
      Object.assign(newForm, res.data.records);
      total.value = res.data.total;
      // 转换数据结构
      const transformedForm = newForm.map(item => {
        const dates = item.blamountdate ? item.blamountdate.split(",").filter(item => item.trim() !== '') : [];
        const amounts = item.blamountmoney ? item.blamountmoney.split(",").filter(item => item.trim() !== '') : [];
        const blname = item.blname ? item.blname.split(",").filter(item => item.trim() !== '') : [];
        const blproposedmoney = item.blproposedmoney ? item.blproposedmoney.split(",").filter(item => item.trim() !== '') : [];
        const amount = dates.map((date, index) => ({
          date,
          money: amounts[index]
        }));

        const depart = blname.map((name, index) => ({
          name,
          money: blproposedmoney[index]
        }));
        return {
          ...item,
          amount,
          depart
        };
      });
      tableData.value = transformedForm;
      // 清除选中
      selectedRowKeys.value = [];
      selectedRows.value = [];
    } catch (error) {
      smartSentry.captureError(error);
    } finally {
      tableLoading.value = false;
    }
  }


  watch(
    () => props.year,
    () => {
      if (props.year !== params.year) {
        params.page = 1;
        queryEmployee();
      }
    },
    { immediate: true }
  );

  // ----------------------- 多选操作 ---------------------

  let selectedRowKeys = ref([]);
  let selectedRows = ref([]);
  // 是否有选中：用于 批量操作按钮的禁用
  const hasSelected = computed(() => selectedRowKeys.value.length > 0);

  function onSelectChange(keyArray, selectRows) {
    selectedRowKeys.value = keyArray;
    selectedRows.value = selectRows;
  }




</script>
<style scoped lang="less">
  .employee-container {
    height: 100%;
  }

  .header {
    display: flex;
    align-items: center;
  }

  .query-operate {
    margin-left: auto;
    display: flex;
    align-items: center;
  }

  .btn-group {
    margin: 10px 0;

    .btn {
      margin-right: 8px;
    }
  }
</style>